Tabs com jQuery, menu com abas e Ajax no jQuery

04jun08

Se você está procurando uma solução robusta e complexa de menu com abas (tabs), meu script certamente não é a solução. Mas então por quê eu cheguei a fazê-lo? Para suprir uma necessidade básica que o TABS do jQuery UI3 não atende.

Ao mínimo estranho alguém dizer isso né? Pois bem, se alguém ainda não conhece essa UI do jQuery vale a pena testá-la, ah, para um bom teste, abra a página de testes de abas com o Javascript do seu navegador desabilitado para ver o que acontece.

Simplesmente o conteúdo da Aba que deveria vir logo abaixo dela, não é carregado. E isso se explica porque este conteúdo é carregado de uma outra URL logo durante o carregamento da página e o DIV (onde entra o conteúdo) também é gerado dinamicamente, ou seja, sem JS posso te adiantar que teremos erro de layout no site. Para quem quiser testar: http://www.stilbuero.de/jquery/tabs_3/

Bom, a idéia aqui é criar um menu com abas superiores, que mesmo sem o JS ativo ele mantenha o seu layout correto, e ao menos, o conteúdo da primeira aba ativa seja carregado. Outra funcionalidade é que cada aba possa ter 2 classes independentes, uma para o estado Ativo e outra para o estado Inativo. Digo que são classes independentes para cada aba, justamente para você poder adicionar Imagens de Fundo diferentes em cada Tab. Além disso, você pode definir para cada aba, uma mensagem de “Loading” customizada, ou usar a mensagem padrão definida pelo html, para o carregamento das abas do menu em questão.

Vamos ao código:

XHTML:

<div class=”tab_menu_container”>
<ul id=”tab_menu_1″ class=”tabs-nav” attrLoadingMessage=”Carregando…”>
<li class=”tab_cama_on”><a href=”www.exemplo.com/1″><span>Cama</span></a></li>
<li class=”tab_mesa_off”><a href=”www.exemplo.com/2″ attrLoadingMessage=”Carregando Mesa…”><span>Mesa</span></a></li>
<li class=”tab_banho_off”><a href=”www.exemplo.com/3″><span>Banho</span></a></li>
</ul>
<div class=”tabs-container”></div>
</div>

JAVASCRIPT – jQuery

$().ready(function() {

$(“.tabs-nav li a”).livequery(‘click’,function() {

/* Set Variables */
var URL = $(this).attr(‘href’);

var TabMenu = $(this).parents(“li:first”).parents(“ul:first”).attr(‘id’);
var CurrentTab = $(this).parents(“li:first”);
var ContentArea = $(this).parents(“li:first”).parents(“ul:first”).nextAll(“div:first”);
var LoadingMessageDefault = $(this).parents(“li:first”).parents(“ul:first”).attr(‘attrLoadingMessage’);
var LoadingMessageCustom = $(this).attr(‘attrLoadingMessage’);

/* Set Up the Loading Message */
if (typeof(LoadingMessageCustom) == “undefined” || LoadingMessageCustom == null)
{
var LoadingMessage = LoadingMessageDefault;
}
else
{
var LoadingMessage = LoadingMessageCustom;
}

var LoadingContent = ‘<div class=”tabs-loading”>’ + LoadingMessage + ‘</div>’;

/* Set All Tabs to the Inactive State */
$(“#” + TabMenu + ” > *”).each(function() {
var ActiveClass = $(this).attr(‘class’).replace(‘_off’,”_on”);
var InactiveClass = $(this).attr(‘class’).replace(‘_on’,”_off”);
$(this).removeClass(ActiveClass);
$(this).addClass(InactiveClass);
});

/* Set the Current Tab to the Active State */
var ActiveClass = CurrentTab.attr(‘class’).replace(‘_off’,”_on”);
var InactiveClass = CurrentTab.attr(‘class’).replace(‘_on’,”_off”);
CurrentTab.removeClass(InactiveClass);
CurrentTab.addClass(ActiveClass);

$.ajax({url: URL,
data: URL,
beforeSend: function() {
ContentArea.html(LoadingContent);
},
success: function(response){
ContentArea.html(response);
},
error: function(data) {
alert(‘erro…’);
},
type: “GET”,
dataType: “html”
});

return false;
});

});

CSS:

/* CSS FROM http://stilbuero.de/jquery/tabs_3/ */
/* Caution! Ensure accessibility in print and other media types… */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types… */
.tabs-hide {
display: none;
}
}

/* Hide useless elements in print layouts… */
@media print {
.tabs-nav {
display: none;
}
}

/* Skin */
.tabs-nav {
list-style: none;
margin: 0;
padding: 0px;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: ” “;
}
.tabs-nav li {
border: 1px solid #ccc; /* TAB ITEM */
border-bottom: 0px;
float: left;
margin: 0 0 0 0px;
min-width: 84px; /* be nice to Opera */
}
.tabs-nav a, .tabs-nav a span {
display: block;
padding: 0 10px;
background: url(tab.png) no-repeat;
}
.tabs-nav a {
position: relative;
top: 1px;
z-index: 2;
padding-left: 0;
color: #000 !important;
font-size: 12px;
font-weight: bold !important;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
white-space: nowrap; /* required in IE 6 */
}
.tabs-nav .tabs-selected a {
color: #000;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
background-position: 100% -150px;
outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
background-position: 100% -100px;
}
.tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.tabs-nav .tabs-selected a span {
padding-top: 7px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor… */
cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now… */
cursor: pointer;
}
.tabs-nav .tabs-disabled {
opacity: .4;
}
.tabs-container {
border: 1px solid #ccc;
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
min-height: 150px;
}
.tabs-loading {
padding: 0 0 0 20px;
background: url(/images/loading.uitabs.gif) no-repeat 0 50%;
}

/* Tabs Customization – ready to use image backgrounds to each tab */
.tabs-nav .tab_cama_on {background-color: #FF6600; border:1px solid #FF6600;}
.tabs-nav .tab_mesa_on {background-color: #FF6600; border:1px solid #FF6600;}
.tabs-nav .tab_banho_on {background-color: #FF6600; border:1px solid #FF6600;}

.tabs-nav .tab_cama_off {background-color: #FF9966; border:1px solid #FF9966;}
.tabs-nav .tab_mesa_off {background-color: #FF9966; border:1px solid #FF9966;}
.tabs-nav .tab_banho_off {background-color: #FF9966; border:1px solid #FF9966;}

Filed under: Javascript, jQuery   |  9 Comments
Tags:ajax tab, jQuery, jquery tab, menu abas, menu ajax, menu jquery, menu lista horizontal, menu tab